<script type="text/javascript">
    var available_indexes = [-1,0];
    $(document).ready(function(){
        $( "#accordion" ).accordion({autoHeight: false,collapsible: true});
        document.getElementById("divAsistenteAcordeon").style.width = "100%";
        $( "#accordion" ).accordion({
            header: 'h3',
            change: function(event, ui) {
                var newIndex = $(ui.newHeader).index('h3');
                if (jQuery.inArray(newIndex, available_indexes) == -1) {
                    var oldIndex = $(ui.oldHeader).index('h3');
                    $(this).accordion( "activate" , oldIndex );
                    alert('Debe completar el paso anterior para continuar con el asistente');
                }else{
                    switch(newIndex){
                        case 1:
                            window.frAsiste1.location.reload();
                            $("body").scrollTo( 100, 1300, {queue:true});
                            window.frAsiste1.ajustaIframeyDiv(newIndex);
                            break;
                        case 2:
                            window.frAsiste2.ajustaIframeyDiv(newIndex);
                            break;
                        case 3:
                            window.frAsiste3.ajustaIframeyDiv(newIndex);
                            window.frAsiste3.location.reload();
                            break;
                        case 4:
                            window.frAsiste4.ajustaIframeyDiv(newIndex);
                            window.frAsiste4.location.reload();
                            document.getElementById("divAsiste4").style.height = (parseInt(document.getElementById("frAsiste4").style.height) * 1.7) + "px";
                            document.getElementById("frAsiste4").style.height = (parseInt(document.getElementById("frAsiste4").style.height) * 1.7) + "px";
                            break;
                    };
                }
            }        
        });
    }); // fin $(document).ready(function(){
    function activaAcordion(index){
        var i = 0;
        switch(index){
            case 1:
                alert("Ha creado correctamente la encuesta. Puede continuar asociando ésta a los correspondientes núcleos específicos.");
                break;
            case 2:
                alert("Ha realizado la asociación entre encuestas y núcleos especificos correctamente; puede continuar asociando núcleos específicos ó ir al siguiente paso del asistente PREGUNTAS.");
                break;
            case 3:
                alert("Ha creado correctamente la pregunta, ahora puede completar la información adicional a la misma y/o crear alias.\n En cualquier momento podrá avanzar al siguiente paso (módulos) para la creación de la encuesta");
                break;
            case 4:
                alert("Ha creado correctamente el módulo, puede ahora ordernar los mismos ó continuar al último punto (Asociación preguntas(alias) a módulos según el núcleo)");
                break;
            case 5:
        }
        for(i = 0;i < index; i++){
            document.getElementById("divAsistePaso" + i).setAttribute("class","completed-step");
            document.getElementById("h3" + i).className = document.getElementById("h3" + i).className.replace('asistenteActual','asistenteCompleto');
        }
        document.getElementById("divAsistePaso" + index).setAttribute("class","active-step");
        document.getElementById("h3" + i).className = document.getElementById("h3" + i).className.replace('asistenteFalta','asistenteActual');
        available_indexes.push(index);
        if(index < 2){
            $("#h3" + index).trigger("click");
            eval("window.frAsiste" + index + ".ajustaIframeyDiv(" + index + ")");
        }
    } //fin function activaAcordion(index){
    function verMenu(btn){
        if(document.getElementById("divPasosAsistente").style.display == "none"){
            document.getElementById("divPasosAsistente").style.display = "block";
            btn.childNodes[0].innerHTML ="Ocultar menú";
            document.getElementById("divAsistenteAcordeon").style.width = "80%";
        }else{
            document.getElementById("divPasosAsistente").style.display = "none";
            btn.childNodes[0].innerHTML ="Ver menú";
            document.getElementById("divAsistenteAcordeon").style.width = "100%";
        }
    } //fin function verMenu(btn){
</script>
<style type="text/css">
    .asistenteActual{
        font-weight: bolder;
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffd85e', endColorstr = '#ccc637');
        -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffd85e', endColorstr = '#ccc637')";
        background-image: -moz-linear-gradient(top, #ffd85e, #ccc637);
        background-image: -ms-linear-gradient(top, #ffd85e, #ccc637);
        background-image: -o-linear-gradient(top, #ffd85e, #ccc637);
        background-image: -webkit-gradient(linear, center top, center bottom, from(#ffd85e), to(#ccc637));
        background-image: -webkit-linear-gradient(top, #ffd85e, #ccc637);
        background-image: linear-gradient(top, #ffd85e, #ccc637);
        color: #0d34cc;

    }
    .asistenteCompleto{
        color: white;
        font-weigth:bolder;
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#84c414', endColorstr = '#78993d');
        -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#84c414', endColorstr = '#78993d')";
        background-image: -moz-linear-gradient(top, #84c414, #78993d);
        background-image: -ms-linear-gradient(top, #84c414, #78993d);
        background-image: -o-linear-gradient(top, #84c414, #78993d);
        background-image: -webkit-gradient(linear, center top, center bottom, from(#84c414), to(#78993d));
        background-image: -webkit-linear-gradient(top, #84c414, #78993d);
        background-image: linear-gradient(top, #84c414, #78993d);
        color: #ffffff;
    }
    .asistenteCompleto a{
        color: white !important;
    }
    .asistenteFalta{
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ff0303', endColorstr = '#b20101');
        -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ff0303', endColorstr = '#b20101')";
        background-image: -moz-linear-gradient(top, #ff0303, #b20101);
        background-image: -ms-linear-gradient(top, #ff0303, #b20101);
        background-image: -o-linear-gradient(top, #ff0303, #b20101);
        background-image: -webkit-gradient(linear, center top, center bottom, from(#ff0303), to(#b20101));
        background-image: -webkit-linear-gradient(top, #ff0303, #b20101);
        background-image: linear-gradient(top, #ff0303, #b20101);
    }
    .asistenteFalta a{
        font-weight: bolder !important;
        color: white !important;
    }
    .clIframeAsis{
        border: none;
        width: 100%;
        heigth:100%;
    }
    .divAsistenteGeneral{
        padding: 0px 0px !important;height: 100%
    }
</style>
<div id="divContenedorGenerico" style="width: 100%">
    <div id="divTituloAsistente" style="width: 100%;font-size: 100%;color: #004F79;font-weight: bolder;margin-bottom: 9px;text-align: center">
        <span style="float: left"><button class="buttonA" onclick="verMenu(this);" id="btnVerMenu">Ver menú</button>
<!--            <button onclick="activaAcordion(parseInt(document.getElementById('txtAcordeon').value));" >Prueba</button><input type="text" id="txtAcordeon" /> -->
        </span>ASISTENTE PARA LA CREACIÓN DE ENCUESTAS
    </div>
    <div id="divContenedorAsistente" style="width: 100%;height: 100%;clear: both">
        <div id="divPasosAsistente" style="float: left;height: 100%;width: 20%;display: none">        
            <div class='wizard-steps'>
                <div id="divTituloPasos">PASOS DEL ASISTENTE</div>
                <div id='divAsistePaso0' class='active-step'><a href='#' title='Creación de encuestas'><span>1</span> Encuesta</a></div>
                <div id='divAsistePaso1' ><a href='#' title='Asocia encuestas a niveles especificos'><span>2</span>NúcleosEspecíficos</a></div>
                <div id='divAsistePaso2'><a href='#' title='Administración de preguntas, listas y alias' ><span>3</span>Preguntas</a></div>
                <div id='divAsistePaso3'><a href='#' title='Administración de módulos' ><span>4</span>Módulos</a></div>
                <div id='divAsistePaso4'><a href='#' title='Administración de núcleos específicos'><span>5</span>MódulosPreguntas</a></div>
            </div>    
        </div>
        <div id="divAsistenteAcordeon" style="float: left;width: 80%">
            <div class="demo">

                <div id="accordion">
                    <h3 id="h30" class="asistenteActual"><a href="#">Encuestas</a></h3>
                    <div id="divAsiste0" class="divAsistenteGeneral">
                        <iframe id="frAsiste0" name="frAsiste0" class="clIframeAsis" src="index.php?r=encuestas/admin&asiste=1&acordeon=0"></iframe>
                    </div>
                    <h3 id="h31" class="asistenteFalta"><a href="#" >Encuestas - Núcleos específicos</a></h3>
                    <div id="divAsiste1" class="divAsistenteGeneral">
                        <iframe id="frAsiste1" name="frAsiste1" class="clIframeAsis" src="index.php?r=nucleosespecificosencuestas&asiste=1&acordeon=1"></iframe>                    
                    </div>
                    <h3 id="h32" class="asistenteFalta" ><a href="#">Preguntas</a></h3>
                    <div id="divAsiste2" class="divAsistenteGeneral">
                        <iframe id="frAsiste2" name="frAsiste2" class="clIframeAsis" src="index.php?r=campos/admin&asiste=1&acordeon=2"></iframe>
                    </div>
                    <h3 id="h33" class="asistenteFalta" ><a href="#">Módulos</a></h3>
                    <div id="divAsiste3" class="divAsistenteGeneral">
                        <iframe id="frAsiste3" name="frAsiste3" class="clIframeAsis" src="index.php?r=modulos/admin&asiste=1&acordeon=3"></iframe>
                    </div>
                    <h3 id="h34" class="asistenteFalta" ><a href="#">Asociación preguntas a módulos</a></h3>
                    <div id="divAsiste4" class="divAsistenteGeneral">
                        <iframe id="frAsiste4" name="frAsiste4" class="clIframeAsis" src="index.php?r=modulosalias"></iframe>
                    </div>
                </div>

            </div><!-- End demo -->
        </div>
    </div>
</div>
